<template>
	<view class="home-page">
		<!-- 广告 Banner -->
		<swiper class="banner" autoplay interval="3000" circular>
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image :src="item.imageUrl" mode="aspectFill" />
			</swiper-item>
		</swiper>

		<!-- 系统消息通知栏 -->
		<view class="system-notice">
			<image style="width: 30rpx;height: 30rpx;" src="../../static/image/notify.png"></image>
			<view class="notice-container">
				<view class="notice-wrapper" :style="{ transform: 'translateY(' + translateY + 'px)' }">
					<view v-for="(notice, index) in noticeList" :key="index" class="notice-item">
						{{ notice }}
					</view>
				</view>
			</view>
		</view>

		<!-- 列表 -->
		<scroll-view class="list" scroll-y>
			<view v-for="(item, index) in itemList" :key="index" class="list-item">
				{{ item.title }}
				<view >
					<text>{{item.title}}</text>
					<label>{{item.title}}</label>
					<button @click="enterClick">Enter</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [{
						imageUrl: 'https://img0.baidu.com/it/u=3166670386,3880075581&fm=253&fmt=auto&app=138&f=JPEG?w=549&h=500'
					},
					{
						imageUrl: 'https://img0.baidu.com/it/u=3166670386,3880075581&fm=253&fmt=auto&app=138&f=JPEG?w=549&h=500'
					},
					// Add more banner items as needed
				],
				noticeList: [
					'系统消息1',
					'系统消息2',
					'系统消息3',
					// Add more system notices as needed
				],
				translateY: 0, // 初始化偏移量
				noticeHeight: 30, // 单个通知的高度
				intervalId: null,
				itemList: [{
						title: '列表项1'
					},
					{
						title: '列表项2'
					},
					{
						title: '列表项3'
					},
					// Add more list items as needed
				]
			};
		},
		mounted() {
			// 开始通知滚动
			this.startNoticeScroll();
		},
		destroyed() {
			// 清除定时器
			clearInterval(this.intervalId);
		},
		methods: {
			startNoticeScroll() {
				// 设置定时器，每隔一段时间滚动通知
				this.intervalId = setInterval(() => {
					// 计算偏移量
					this.translateY -= this.noticeHeight;
					// 当到达最后一个通知时，回到起始位置
					if (Math.abs(this.translateY) >= this.noticeHeight * this.noticeList.length) {
						this.translateY = 0;
					}
				}, 2000); // 间隔时间可根据需要调整
			},
			enterClick(){
				uni.navigateTo({
					url:'/pages/redpackage/redpackage'
				})
			}
		}
	};
</script>

<style scoped>
	/* 样式可根据实际需求进行调整 */
	page {
		background: #f5f5f5;
	}

	.home-page {}

	.banner {
		height: 350rpx;
	}

	.system-notice {
		margin-top: 10rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.fixed-buttons {
		position: fixed;
		top: 20px;
		right: 20px;
		display: flex;
		flex-direction: column;
	}

	.fixed-buttons button {
		margin-bottom: 10px;
		padding: 8px 16px;
		border-radius: 5px;
	}

	.notice-container {
		height: 30px;
		/* 单个通知的高度 */
		overflow: hidden;
	}

	.notice-wrapper {
		transition: transform 0.5s ease;
		/* 可以调整动画持续时间和效果 */
	}

	.notice-item {
		height: 30px;
		/* 单个通知的高度 */
		line-height: 30px;
		/* 垂直居中 */
	}

	.list {
		margin-top: 20rpx;
		background: white;
		margin: 20rpx 24rpx 0 24rpx ;
	}

	.list-item {
		border-radius: 12rpx;
		background: red;
		height: 200rpx;
		color: yellow;
		border-bottom: 16rpx solid white;
	}
</style>